<template>
  <div class="login-wrap">
    <div class="container">
      <div class="row col-lg-8 col-md-8 col-xs-10 col-sm-10 m-auto">
        <div class="w-100">
          <div class="rounded shadow p-5 content-top">
            <h4 class="text-center pb-3">{{$config.logo }}</h4>
            <el-form status-icon :model="form" ref="form" :rules="rules">
              <el-form-item label="用户名" prop="username">
                <el-input
                  class="el-icon-user"
                  @focus="setMove"
                  v-model="form.username"
                  :class="{
                    animate__animated: true,
                    animate__shakeX: noUsername,
                  }"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  @focus="setMove"
                  class="el-icon-suitcase-1"
                  v-model="form.password"
                  :class="{
                    animate__animated: true,
                    animate__shakeX: noPassword,
                  }"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" round @click="sendLoginInfo"
                  >登陆</el-button
                >
                <el-button type="info" round @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 自定义表单验证
    var checkUsername = (rule, value, callback) => {
      // 判断是什么框 用户名框与 密码框
      if (rule.field === 'username') {
        // 用户名框非空校验
        if (!value) {
          this.noUsername = true
          return callback(new Error('用户名名不能为空'))
        }
        callback()
      } else {
        if (!value) {
          this.noPassword = true
          return callback(new Error('密码不能为空'))
        } else {
          if (value.length < 6) {
            this.noPassword = true
            return callback(new Error('密码错误'))
          }
          callback()
        }
      }
    }
    return {
      noUsername: false,
      noPassword: false,
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ validator: checkUsername, trigger: 'blur' }],
        password: [{ validator: checkUsername, trigger: 'blur' }],
      },
    }
  },
  methods: {
    // 还原动画
    setMove() {
      this.noUsername = false
      this.noPassword = false
    },
    // 表单验证通过发送请求给到后台
    async sendLoginInfo() {
      // 检查表单是否验证通过
      try {
        const ispass = await this.$refs.form.validate()
        
        if (!ispass) return
        // 此处发送请求表单验证通过
        // 跳转到后台首页
        // console.log(ispass)
        this.$router.push({ name: 'home' })
      } catch (err) {
        console.log(err)
      }
    },
    resetForm() {
      this.noUsername = false
      this.noPassword = false
      // 重置表单
      this.$refs.form.resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.content-top {
  margin-top: 15rem;
  /deep/ .el-input__inner {
    padding: 0 25px;
  }
  .el-icon-user:before,
  .el-icon-suitcase-1:before {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
